<style scoped>
.action-link {
  cursor: pointer;
}
</style>

<template>
  <div>
    <div>
      <div class="card card-default">
        <div class="card-header">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>Personal Access Tokens</span>

            <a class="action-link" tabindex="-1" @click="showCreateTokenForm">Create New Token</a>
          </div>
        </div>

        <div class="card-body">
          <!-- No Tokens Notice -->
          <p
            class="mb-0"
            v-if="tokens.length === 0"
          >You have not created any personal access tokens.</p>

          <!-- Personal Access Tokens -->
          <table class="table table-borderless mb-0" v-if="tokens.length > 0">
            <thead>
              <tr>
                <th>Name</th>
                <th></th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(token, index) in tokens" v-bind:key="index">
                <!-- Client Name -->
                <td style="vertical-align: middle;">{{ token.name }}</td>

                <!-- Delete Button -->
                <td style="vertical-align: middle;">
                  <a class="action-link text-danger" @click="revoke(token)">Delete</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Create Token Modal -->
    <div class="modal fade" id="modal-create-token" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Create Token</h4>

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>

          <div class="modal-body">
            <!-- Form Errors -->
            <div class="alert alert-danger" v-if="form.errors.length > 0">
              <p class="mb-0">
                <strong>Whoops!</strong> Something went wrong!
              </p>
              <br />
              <ul>
                <li v-for="(error, index) in form.errors" v-bind:key="index">{{ error }}</li>
              </ul>
            </div>

            <!-- Create Token Form -->
            <form role="form" @submit.prevent="store">
              <!-- Name -->
              <div class="form-group row">
                <label class="col-md-4 col-form-label">Name</label>

                <div class="col-md-6">
                  <input
                    id="create-token-name"
                    type="text"
                    class="form-control"
                    name="name"
                    v-model="form.name"
                  />
                </div>
              </div>

              <!-- Scopes -->
              <div class="form-group row" v-if="scopes.length > 0">
                <label class="col-md-4 col-form-label">Scopes</label>

                <div class="col-md-6">
                  <div v-for="(scope, index) in scopes" v-bind:key="index">
                    <div class="checkbox">
                      <label>
                        <input
                          type="checkbox"
                          @click="toggleScope(scope.id)"
                          :checked="scopeIsAssigned(scope.id)"
                        />
                        {{ scope.id }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <!-- Modal Actions -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            <button type="button" class="btn btn-primary" @click="store">Create</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Access Token Modal -->
    <div class="modal fade" id="modal-access-token" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Personal Access Token</h4>

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>

          <div class="modal-body">
            <p>
              Here is your new personal access token. This is the only time it will be shown so don't lose it!
              You may now use this token to make API requests.
            </p>

            <textarea class="form-control" rows="10" v-model="accessToken"></textarea>
          </div>

          <!-- Modal Actions -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import axios from "src/util/api.request";

export default {
  /*
   * The component's data.
   */
  data() {
    return {
      accessToken: null,

      tokens: [],
      scopes: [],

      form: {
        name: "",
        scopes: [],
        errors: []
      }
    };
  },

  /**
   * Prepare the component (Vue 1.x).
   */
  ready() {
    this.prepareComponent();
  },

  /**
   * Prepare the component (Vue 2.x).
   */
  mounted() {
    this.prepareComponent();
  },

  methods: {
    /**
     * Prepare the component.
     */
    prepareComponent() {
      this.getTokens();
      this.getScopes();

      $("#modal-create-token").on("shown.bs.modal", () => {
        $("#create-token-name").focus();
      });
    },

    /**
     * Get all of the personal access tokens for the user.
     */
    getTokens() {
      axios.get("/oauth/personal-access-tokens").then(response => {
        this.tokens = response.data;
      });
    },

    /**
     * Get all of the available scopes.
     */
    getScopes() {
      axios.get("/oauth/scopes").then(response => {
        this.scopes = response.data;
      });
    },

    /**
     * Show the form for creating new tokens.
     */
    showCreateTokenForm() {
      $("#modal-create-token").modal("show");
    },

    /**
     * Create a new personal access token.
     */
    store() {
      this.accessToken = null;

      this.form.errors = [];

      axios
        .post("/oauth/personal-access-tokens", this.form)
        .then(response => {
          this.form.name = "";
          this.form.scopes = [];
          this.form.errors = [];

          this.tokens.push(response.data.token);

          this.showAccessToken(response.data.accessToken);
        })
        .catch(error => {
          if (typeof error.response.data === "object") {
            this.form.errors = _.flatten(_.toArray(error.response.data.errors));
          } else {
            this.form.errors = ["Something went wrong. Please try again."];
          }
        });
    },

    /**
     * Toggle the given scope in the list of assigned scopes.
     */
    toggleScope(scope) {
      if (this.scopeIsAssigned(scope)) {
        this.form.scopes = _.reject(this.form.scopes, s => s == scope);
      } else {
        this.form.scopes.push(scope);
      }
    },

    /**
     * Determine if the given scope has been assigned to the token.
     */
    scopeIsAssigned(scope) {
      return _.indexOf(this.form.scopes, scope) >= 0;
    },

    /**
     * Show the given access token to the user.
     */
    showAccessToken(accessToken) {
      $("#modal-create-token").modal("hide");

      this.accessToken = accessToken;

      $("#modal-access-token").modal("show");
    },

    /**
     * Revoke the given token.
     */
    revoke(token) {
      axios
        .delete("/oauth/personal-access-tokens/" + token.id)
        .then(response => {
          this.getTokens();
        });
    }
  }
};
</script>
